<template>
  <div class="category-dropdown" v-show="modelValue">
    <div class="category-section">
      <h2 class="section-title">我的频道</h2>
      <div class="category-grid">
        <div v-for="(item, index) in myChannels" 
             :key="index" 
             class="category-item">
          {{ item }}
        </div>
      </div>
    </div>
    
    <div class="category-section">
      <h2 class="section-title">推荐频道</h2>
      <div class="category-grid">
        <div v-for="(item, index) in recommendedChannels" 
             :key="index" 
             class="category-item">
          <span class="plus-icon">+</span>
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CategoryDropdown',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      myChannels: [
        '推荐', '直播', '短剧', '科技数码',
        '旅行', '美食', '头像', '汽车',
        '摄影', '家装', '壁纸', '穿搭',
        '家居', '情感', '舞蹈', '学习',
        '影视', '音乐', '游戏', '男士理容',
        '艺术', '动漫', '搞笑'
      ],
      recommendedChannels: [
        '读书', '职场', '科学', '绘画',
        '潮鞋', '减脂', '健身', '护肤',
        '手工', '婚礼', '明星', '萌宠',
        '文化', '机车', '竞技', '心理',
        '户外', '母婴', '社科', '校园',
        '体育', '潮玩', '露营', '绘艺'
      ]
    }
  }
}
</script>

<style scoped>
.category-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.section-title {
  font-size: 33px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-item {
  width: 150px;
  height: 82px;
  background: #f7f7f7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s;
}

.category-item:hover {
  background: #f0f0f0;
}

.plus-icon {
  margin-right: 4px;
  color: #999;
}

.category-section {
  margin-bottom: 30px;
}

.category-section:last-child {
  margin-bottom: 0;
}
</style> 